<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试 dom技术</title>
    <script>
        //1.创建函数
        function fun() {
            //练习1.选中id="d",获取内容
            //先获取Document对象，再调用对象的API
            var a = window.document.getElementById('d');
            console.log(a); //获取元素
            console.log(a.innerHTML); //获取内容

            //练习2.选中我是p2元素，并获取内容
            var x = document.getElementsByName("b");
            console.log(x);
            console.log(x[2]); //获取下标为2的元素
            console.log(x[2].innerHTML); //获取下标为2的元素的内容

            //练习3.选中我是p2元素，并修改内容
            document.getElementsByName("b")[2].innerHTML = "<h1>看我变成这个了</h1>";

            //练习4.选中我是div3元素，并修改内容
            document.getElementsByClassName('a')[1].innerHTML = "我也变了";


            //练习5.选中我是div3元素，并修改样式
            //document.getElementsByClassName('a')[1].style.color="blue";//按照class获取后修改颜色
            //document.getElementsByTagName('div')[2].style.fontFamily="黑体";//按照div获取后改变字体
            document.getElementsByTagName('div')[2].style.fontSize = '60px'; //按照div获取后改变字号

        }
    </script>
</head>

<body>
    <div id="d" onclick="fun()">我是div1</div>
    <div class="a">我是div2</div>
    <div class="a">我是div3</div>
    <div name="b">我是div4</div>

    <p name="b">我是p1</p>
    <p name="b">我是p2</p>
    <p name="b">我是p3</p>
    <p name="a">我是p4</p>
</body>

</html>